<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
       


        // function fn() {
        //     setTimeout(() => {
        //         console.log(111);
        //         fn();
        //     }, 1000)
        // }

        // fn();

        // requestAnimationFrame :动画帧，支持后台运行 ；


        // 一 、 向右移动 
        // 获取方块当前所在的left 值 ；
        // let boxEle = document.querySelector(".box");
        // // boxEle.style.left; 只能设置 或者 获取 行间样式
        // // let num = boxEle.style.left;
        // // 获取非行间样式
        // var timer =   setInterval(() => {
        //     let num = parseInt( getComputedStyle(boxEle, null)['left']);
        //     // currentStyle  :IE 浏览器
        //     console.log(num);
        //     let speed = 10;
        //     if(num>300){
        //         clearInterval(timer);
        //     }else{
        //          boxEle.style.left = num + speed + "px";

        //     }
        // },100)



        let boxEle = document.querySelector(".box");
        function move(boxEle, target,dir,cb) {
            return new Promise(resolve => {
                var timer = setInterval(() => {
                    let num = parseInt(getComputedStyle(boxEle, null)[dir]);
                    // currentStyle  :IE 浏览器
                    console.log(num);
                    let speed = 10 * (target>num?1:-1);
                    if (num === target) {
                        clearInterval(timer);
                        cb && cb();
                        resolve();
                    } else {
                        boxEle.style[dir] = num + speed + "px";
                    }
                }, 100)
            });
        }

        

        // 画圈  
        // 回调地狱 ；
        // 如何解决回调地狱 ；
        // 1.观察者模式 ；2.promise
        // move(boxEle,300,"left",function(){
        //     move(boxEle,300,"top",function(){
        //         move(boxEle,0,"left",function(){
        //             move(boxEle,0,"top",function(){
        //                 console.log('完成');
        //             })
        //         })
        //     })
        // })
        let p1 = move(boxEle,300,"left").then(() => {
            return  move(boxEle,300,"top");
        }).then(()=> {
            return  move(boxEle,0,"left");
        }).then(() => {
            return  move(boxEle,0,"top");
        })
        

    </script>
</body>

</html>